<template>
	<view class="mainpadding">
		<view class="flexaround tavs">
			<view :class="current==1?'focustext':'nofocustext'" @click="selectab(1)">场地</view>
			<view :class="current==2?'focustext':'nofocustext'" @click="selectab(2)">课程</view>
		</view>
		<!-- 场地 -->
		<view class="flexcenter" v-if="!list.data.length">
			<view class="placeholderimage" style="margin-top: 300rpx;" ></view>
		</view>
		<template v-if="current==1">
			<view class="xiahuaxian margin_top" v-for="item in list.data" :key="item.cg_id" @click="tzcdyd(item.cg_id)">
				<view class="flexbetween">
					<view class="shilitu">
						<image :src="item.cg.image_text" mode=""></image>
					</view>
					<view class="" style="width: 69%;">
						<view class="titletext xiaohei fonweight yhxk">{{item.cg.name}}</view>
						<view class="flexbetween margin_top2">
							<view class="flexleft ">
								<view class="smalltext xiaohui nofonweight margin_right2">{{item.cg.userzbfapply.name}}</view>
								<view class="line margin_right2"></view>
								<view class="smalltext xiaohui nofonweight">{{item.cg.cityinfo}}</view>
							</view>
							<!-- <view class="smalltext xiaohei nofonweight">{{returnKmUnit(Number(item.distance))}}</view> -->
						</view>
						<view class="flexbetween margin_top2">
							<view class="huibtn margin_right1 yhxk" v-for="(ite,inde) in item.cg.cg_bq_ids_text" :key="inde" v-if="inde<2">{{ite}}</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 课程 -->
		<template v-if="current==2">
			<view class="xiahuaxian margin_top" v-for="item in list.data" :key="item.kc.id" @click="tzkecxq(item.kc.id)">
				<view class="flexbetween">
					<view class="shilitu">
						<image :src="item.kc.image_text" mode=""></image>
					</view>
					<view class="" style="width: 69%;">
						<view class="titletext xiaohei fonweight yhxk">{{item.kc.name}}</view>
						<view class="flexleft margin_top2">
							<view class="smalltext xiaohui nofonweight margin_right2">{{item.kc.userzbfapply.name}}
							</view>
							<view class="line margin_right2"></view>
							<view class="smalltext xiaohui nofonweight yhxk">{{item.kc.cityinfo}}
							</view>
						</view>
						<view class="flexbetween margin_top2">
							<view class="sanshier xiaohong fonweight">¥ {{item.kc.priceinfo.price}}</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 教练 -->
		<!-- <view class="xiahuaxian margin_top" v-for="item in 2">
			<view class="flextop">
				<view class="shilitu">
					<image src="../static/image/system/banner1.png" mode=""></image>
				</view>
				<view class="" style="width: 69%;">
					<view class="titletext xiaohei fonweight yhxk">李木子</view>
					<view class="strongtext xiaohui nofonweight margin_top6">XXX场地名称</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				current: 1,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			// 跳转场定预定详情
			tzcdyd(id) {
				uni.navigateTo({
					url: '/pages_homepage/changdingydqx?id=' + id
				})
			},
			// 跳转课程详情
			tzkecxq(id) {
				uni.navigateTo({
					url: '/pages_homepage/kechenggmxq?id=' + id
				})
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit
				}
				let url = '/api/cgcl/cgCollectIndex'
				if (this.current == 2) { //课程
					url = '/api/kccl/kcCollectIndex'
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
						this.$forceUpdate()
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			selectab(i) {
				if (i == this.current) {
					return false
				}
				this.current = i
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.huibtn {
		background: #F9F9F9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 6rpx 10rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
	}
	.shilitu {
		width: 200rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.tavs {
		padding: 0 30rpx;
	}

	.focustext {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #1BA95B;
	}

	.nofocustext {
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
	}
</style>